.menu-form {
  white-space: nowrap;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 40px;
  transition: all 750ms ease-in-out;
  user-select: none;

  .menu-container-background {
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.5s ease-in-out;
  }

  .menu-container-background:hover {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .menu-container {
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 15px 30px 10px 30px;
    transition: all 0.5s ease-in-out;

    .container-left {
      flex: 1;
      margin-bottom: 5px;
      display: flex;
      opacity: 1;

      .left-icon {
        border-radius: 22.5px;
        width: 40px;
        height: 40px;
      }

      .left-content {
        color: #333333;
        margin-left: 10px;
        line-height: 40px;
        font-size: 24px;
        font-weight: bolder;
      }
    }

    .container-right {
      flex: 0;

      .menu-desktop {

        .menu-list {
          display: flex;

          .menu-item {
            margin-left: 20px;

            .item-top {
              padding: 0 8px 0 0;
              display: flex;
              color: #333;
              font-weight: bolder;
              line-height: 40px;
              height: 40px;
              align-items: center;
              transition: all 0.2s ease-in-out;

              .menu-item-image {
                width: 20px;
                height: 20px;
                border-radius: 10px;
              }

              .menu-item-content {
                margin-left: 5px;
                line-height: 20px;
                font-size: 16px;
              }
            }

            .item-bottom {
              margin-top: 2px;
              width: 100%;

              .item-bottom-line {
                border-radius: 2px;
                width: 0;
                height: 3px;
                background-color: #99CCCC;
                transition: all 0.2s ease-in-out;
              }
            }
          }

          .menu-item:hover {

            .item-top {
              color: dodgerblue;
            }

            .item-bottom {
              .item-bottom-line {
                width: 100%;
              }
            }
          }
        }
      }

      .menu-mobile {
        display: none;
      }
    }

    .container-other {
      margin-left: 10px;

      .container-other-logout {
        display: flex;

        .other-search {
          border: 2px solid rgba(255, 255, 255, 0);
          transition: all 0.5s ease-in-out;
          border-radius: 5px;
          margin: 5px;

          .other-search-image {
            padding: 5px;
            width: 20px;
            height: 20px;
          }
        }

        .other-login {
          border: 2px solid rgba(255, 255, 255, 0);
          transition: all 0.5s ease-in-out;
          border-radius: 5px;
          margin: 5px;

          .other-logout-image {
            padding: 5px;
            width: 20px;
            height: 20px;
          }

          :deep(.el-tooltip__trigger:focus-visible) {
            outline: unset;
          }
        }

        .other-search:hover {
          border: 2px solid rgba(255, 255, 255, 1);
        }

        .other-login:hover {
          border: 2px solid rgba(255, 255, 255, 1);
        }
      }
    }
  }

  .menu-container-active {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0;
  }
}

.menu-form-active {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .menu-desktop, .container-other {
    display: none;
  }

  .menu-mobile {
    display: block;
  }
}